<template>
  <div>
    <!-- <div class="login-title">这里是停车桩中心</div> -->
    
    <mt-button class="return-btn" type="primary" @click="returnpop=true">模拟还车</mt-button>
    <div class="pile-box" v-for="pile in piles" :key="pile.index">
      <div>位置：{{pile.area}} 代号：{{pile.pileNum}}</div>
      
      <div>总数：{{pile.pilesCount}}<span style="color:transparent;">-------</span>
           空余：{{pile.pilesAvailable}}<span style="color:transparent;">-------</span>
           已停：{{pile.pilesUnavailabe}}</div>
    </div>
        <div class="pile-box2" style="height:50px;">

    </div>
    <!-- <div>{{piles}}</div> -->

    <!-- 模拟还车 -->
    <mt-popup v-model="returnpop" position="right">
      <div class="pop">
        <div class="pop-text">
          <mt-field class="login-input" label type="text" placeholder="车桩代号(不能为空)，如：MA1" v-model="pile1"></mt-field>
          <mt-field class="login-input" label type="text" placeholder="车桩序号(不能为空)，如：11" v-model="pile2"></mt-field>
        </div>
        <mt-button
          type="danger"
          size="small"
          @click.native="returnpop=false"
          style="margin-top:20px;margin-right:50px;"
        >关闭</mt-button>
        <mt-button
          type="primary"
          size="small"
          @click.native="returnbikeclick(pile1,pile2)"
          style="margin-top:20px;"
        >还车</mt-button>
      </div>
    </mt-popup>


  </div>
</template>
<script>
import {pileget} from '../../api/pile'
import { Toast } from "mint-ui";
import {returnbike} from '../../api/bike'
export default {
  data() {
    return {
      piles: [],//接收后端数据
      returnpop:false,
      pile1:"",
      pile2:""


    };
  },
  methods: {
    getpile() {
      pileget().then(res => {
        if(res.code===1){
          console.log(res);
          this.piles = res.data;
        }
        else{
          Toast({
            message: "获取停车桩失败",
            position: "middle",
            duration: 1000
          })
        }
      })
    },
    //写一个还车
    returnbikeclick(pile1,pile2){
      if(pile1==''||pile2==''){
          Toast({
            message: "代号与序号都不能为空",
            position: "bottom",
            duration: 1000
          })
        return 0 ;
      }
      let pileNum = pile1 + "+" + pile2;
      let bicycleNum = this.$store.getters.userData.bicycleNum;
      this.put_returnbike(bicycleNum,pileNum);
    },
    //还车的请求
    put_returnbike(bicycleNum,pileNum){
      returnbike(bicycleNum,pileNum).then(res=>{
        if(res.code==1){
          console.log(res);
          let Rbike = {
            borrowStatus:0,
            bicycleNum:0
        }
        this.$store.commit('user/BIKE_CHANGE',Rbike);
        Toast({
            message: "还车成功",
            position: "middle",
            duration: 1000
          })
          this.returnpop=false;
          this.getpile();
        }
      }).catch(err =>{
        console.log(err);
        Toast({
          message: err.msg,
          position: "middle",
          duration: 1000
        });

      })

    }

  },
  mounted() {
    this.getpile();
  }
};
</script>
<style  scoped>
.pile-box {
  padding: 25px 20px;
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;
  background: rgb(153, 247, 247);
  border-radius: 30px;
}
.pile-box2 {
  padding: 25px 20px;
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;

}
.return-btn{
  width: 80%;
  margin-top: 30px;
  border-radius: 100px;
}
.pop {
  background-color: white;
  padding: 40px 30px;
  /* height: 100%; */
  width: 100vw;
  /* font-size: 50px; */
}
.pop-text {
  font-size: 50px;
  text-align: start;
}
</style>